import React, { Component } from 'react';
import { Icon } from 'antd-mobile';

import './Order.scss'

class Order extends Component {
	render() {
    let height = window.screen.availHeight
		return (
			<div className="order-page" style={{minHeight: height + 'px'}}>
        <div className="address-container">
          <div className="title flex space-between y-center">
            <span>确认收货信息</span>
            <span className="flex space-between y-center"><span>编辑</span><Icon type="right" size="xs" /></span>
          </div>

          <div className="address-board flex y-center">
            <img src={require('../../images/position.png')} alt="" className="address-icon"></img>
            {/* 新增收货地址 */}
            {/* <div className="new-address flex y-center">
              <img src={require('../../images/add.png')} alt="" className="add-icon"></img>
              <span>新增收货地址</span>
            </div> */}
            <div className="address-detail">
              <div className="flex space-between name-phone">
                <span>收件人： 高程哈</span>
                <span className="phone">13800138000</span>
              </div>
              <div className="address-more">
              收货地址：北京市东城区景山街道北京中医医院西南角305号
              </div>
            </div>
          </div>
        </div>

        <div className="product-detail">
          <div className="title">
          商品信息</div>

          <div className="details flex y-center">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""></img>
            <div>
              <div className="detail-title">
                净水器家用直饮厨房净水机不锈钢台式过滤器
              </div>
              <div className="detail-money flex space-between">
                  <span>￥<span style={{color: '#f95f5c'}}>12.00</span> 元/天</span>
                  <span><span className="small">×</span>500.00 元/期</span>
              </div>
              <div className="detail-total flex space-between">
                <span>共1件商品 </span>
                <span>合计：500.00元（含运费）</span>
              </div>
            </div>

          </div>

          <div className="title flex space-between">
            <span>配件设备（固定）</span>
            <span><span className="red">298.00</span> 元</span>
          </div>

          <div className="title flex space-between">
            <span>配送方式</span>
            <span>普通快递<Icon type="right" size="xs"  className="vertical-center"/></span>
          </div>
        </div>
        <div className="bottom-bar flex">
            <div className="totalMoney">合计  ￥<span className="red">798.00</span> 元</div>
            <div className="createOrder">提交订单</div>
        </div>
			</div>
		);
	}
}

export default Order;